<template>
  <div class="vbestui-checkbox-group" 
  @change="handleChange"
  :class="[vertical?'vbestui-checkbox-group-vertical':'']">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "BCheckboxGroup",
  props: {
    value: {
      type: Array,
      default: [],
    },
    border: {
      type: Boolean,
      default: false,
    },
    button: {
      type: Boolean,
      default: false,
    },
    vertical: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  provide() {
    return {
      checkboxGroup: this,
    };
  },
  methods:{
      handleChange(){
          this.$emit('change',this.value);
      }
  }
};
</script>
<style scoped>
.vbestui-checkbox-group {
    display: inline-block;
  }
  .vbestui-checkbox-group-vertical {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .vbestui-checkbox-group-vertical label {
    margin: 5px 0px;
  }
</style>